
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import store from '@/.storybook/store';
import searchResults from '../../../pages/searchResults.vue';

<Meta
  title="Pages/Search Results"
  component={searchResults}
  argTypes={{
    noResults: { name:'No results', control: { type: 'boolean' } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { searchResults },
  store: store,
  template: '<searchResults :noResults="noResults" :isLoading="isLoading" />',
});

# Search results

<Canvas>
  <Story
    name="With results"
    args={{
      noResults: false,
      isLoading: false
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<a href="?path=/story/pages-search-results--example">Go to the Canvas Tab</a>

---

<a href="?id=pages-search-results--with-results&args=&viewMode=story" target="_blank">Open page in full width in a new tab</a>

# No results

<Canvas>
  <Story
    name="Without results"
    args={{
      noResults: true,
      isLoading: false
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<a href="?path=/story/pages-search-results--example">Go to the Canvas Tab</a>

---

<a href="?id=pages-search-results--without-results&args=&viewMode=story" target="_blank">Open page in full width in a new tab</a>



# Loading example

<a href="?path=/story/pages-search-results--example">Go to the Canvas Tab</a>

---

<a href="?id=pages-search-results--when-loading&args=&viewMode=story" target="_blank">Open page in full width in a new tab</a>

<Canvas>
  <Story
    name="When Loading"
    args={{
      noResults: true,
      isLoading: true
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


